jQuery Mobile コンポーネントシリーズ #5 「ボタン」

前回は「ツールバー」について紹介しました。

ボタンとは

jQuery Mobileのボタンはモバイル端末上でボタンとして認識されやすいようなスタイル、また使いやすいよう最適化されています。

ボタンの指定

jQuery Mobileのボタンには大きく分けて２つの指定方法があります。指定方法が違うというだけで見た目は同じです。

• リンクボタン
• フォームボタン

リンクボタン

リンクボタンはアンカーリンクに「data-role="button"」を指定することでボタンとして整形されます。

<a href="#" data-role="button">リンクボタン</a>

リンクボタンを開く（このサンプルはChromeブラウザでの閲覧をおすすめします。）

フォームボタン

フォームボタンはbutton要素、input要素のsubmit,reset,button,imageのいずれかが指定されていればボタンとして整形されます。「data-role="button"」の指定は必要ありません。

<button>button要素</button>
<input type="button" value="input type button" />
<input type="submit" value="input type submit" />
<input type="reset" value="input type reset" />
<input type="image" value="input type image" />

フォームボタンを開く（このサンプルはChromeブラウザでの閲覧をおすすめします。）

ボタンのレイアウト

ボタンには4つのレイアウト方法があります。デフォルトは何も指定しないで表示した場合です。

• デフォルト（ブロックレベル）
• インラインボタン
• グループボタン
• レイアウトグリッド

インラインボタン

jQuery Mobileのボタンはブロックレベル要素として親要素いっぱいに広がります。
ボタンはインライン要素として表示することもでき、文字列の量によってサイズを可変にすることもできます。その場合は要素の属性に「data-inline="true"」を指定します。

<a href="#" data-role="button" data-inline="true">インラインボタン</a>
<a href="#" data-role="button" data-inline="true">送信</a>

インラインボタンを開く（このサンプルはChromeブラウザでの閲覧をおすすめします。）

グループボタン

グループボタンは複数のボタンを関連づけして表示したいときに利用します。
グループ化するには、ボタン群をコンテナとなる要素で囲みます。その要素に対し「data-role="controlgroup"」を指定することで実現できます。

「data-inline="true"」が指定されていると意図した表示にはならないので注意です。

<div data-role="controlgroup">
	<a href="#" data-role="button">コピー</a>
	<a href="#" data-role="button">貼り付け</a>
	<a href="#" data-role="button">削除</a>
</div>

横向きに並べる

ボタンを横向きに並べるには「data-type="horizontal"」を指定します。

<div data-role="controlgroup" data-type="horizontal">
	<a href="#" data-role="button">コピー</a>
	<a href="#" data-role="button">貼り付け</a>
	<a href="#" data-role="button">削除</a>
</div>

グループボタンを開く（このサンプルはChromeブラウザでの閲覧をおすすめします。）

レイアウトグリッドを使ったボタン配置

レイアウトグリッドは、画面の横幅を指定の数だけ分割し、個々のグリッドのサイズに合わせたボタンを配置することができます。
レイアウトグリッドは最大5カラムまで対応でき、カラム数に合ったCSSクラスを指定します。ここでは詳細を省きます。

グリッドレイアウトでボタンを配置した際、文字列に対してボタンの横幅が足りないと、三点リーダーで表示されます。

クラスの指定

クラスは、カラム数に合ったクラスをコンテナに指定します。

• 2カラム：ui-grid-a
• 3カラム：ui-grid-b
• 4カラム：ui-grid-c
• 5カラム：ui-grid-d

また、カラムに応じたブロック用コンテナにもクラスにui-block-a/b/c/dを指定します。

たとえば、4カラムのボタン配置を試してみます。

<div class="ui-grid-c">
	<div class="ui-block-a">
		<a href="#" data-role="button">ボタン1</a>
	</div>
	<div class="ui-block-b">
		<a href="#" data-role="button">ボタン2</a>
	</div>
	<div class="ui-block-c">
		<a href="#" data-role="button">ボタン3</a>
	</div>
	<div class="ui-block-d">
		<a href="#" data-role="button">ボタン4</a>
	</div>
</div>

グリッドレイアウトボタンを開く（このサンプルはChromeブラウザでの閲覧をおすすめします。）

グリッドレイアウトの詳細はこちらを確認してみてください。

• レイアウトグリッドの詳細はこちら

この他にボタンの指定が可能です。利用方法は他のComponentと同様ですので、ここでは省きます。
次回は、開閉式コンテンツについて紹介したいと思います。

参考

• ボタン